<template>
	<div class="not404">
		<div class="back" @click="goback">
			<返回主页
		</div>
		<h1 class="warp">
		  <span>找</span>
		  <span>不</span>
		  <span>到</span>
		  <span>页</span>
		  <span>面</span>
		  <span>!</span>
		</h1>
	</div>
</template>

<script>
	export default {
		name: "404",
		data: function() {
			return {

			}
		},
		created: function() {
			this.$bus.$emit('footShow', false)
		}, // 创建时
		beforeMount: function() {}, // 挂载之前
		mounted: function() {}, // 挂载之后
		beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
		updated: function() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed: function() {}, // 实例销毁后调用
		methods: {
			goback(){
				this.$router.replace("/indexView")
			}
		} // 函数

	}
</script>

<style lang="scss">
	.not404 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: skyblue;
		background-image: -webkit-linear-gradient(90deg, skyblue 0%, steelblue 100%);
		background-attachment: fixed;
		background-size: 100% 100%;
		overflow: hidden;
		-webkit-font-smoothing: antialiased;
	}
	
	::selection {
		background: transparent;
	}
	/* CLOUDS */
	
	.not404:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 0;
		height: 0;
		margin: auto;
		border-radius: 100%;
		background: transparent;
		display: block;
		box-shadow: 0 0 150px 100px rgba(255, 255, 255, .6), 200px 0 200px 150px rgba(255, 255, 255, .6), -250px 0 300px 150px rgba(255, 255, 255, .6), 550px 0 300px 200px rgba(255, 255, 255, .6), -550px 0 300px 200px rgba(255, 255, 255, .6);
	}
	/* JUMP */
	
	.warp {
		cursor: default;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100px;
		margin: auto;
		display: block;
		text-align: center;
	}
	
	.warp span {
		position: relative;
		top: 20px;
		display: inline-block;
		-webkit-animation: bounce .3s ease infinite alternate;
		font-family: 'Titan One', cursive;
		font-size: 80px;
		color: #FFF;
		text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, .4);
	}
	
	.warp span:nth-child(2) {
		-webkit-animation-delay: .1s;
	}
	
	.warp span:nth-child(3) {
		-webkit-animation-delay: .2s;
	}
	
	.warp span:nth-child(4) {
		-webkit-animation-delay: .3s;
	}
	
	.warp span:nth-child(5) {
		-webkit-animation-delay: .4s;
	}
	
	
	@-webkit-keyframes bounce {
		100% {
			top: -20px;
			text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2);
		}
	}
	.back{
		padding: 40px;
		font-size: 28px;
		transition: all 0.5s;
		cursor: pointer;
		color: #fff;
		&:hover{
			color: red;
		}
	}
</style>